<template>
  <div>
    <!-- 头部代码 -->
    <div class="head">
      <van-nav-bar title="个人信息" @click-left="onClickLeft" left-arrow />
    </div>
    <!-- 通过方法计算获得完整度数值 -->
    <div class="datacomplete">
      <p>资料完整度:{{ num }}%</p>
    </div>
    <div class="msgbox">
      <!-- 头像部分 -->
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <span class="touxiang"
          ><img src="../assets/img/touxiang.webp" alt=""
        /></span>
        <template #title>
          <!-- 头像图片 -->
          <span class="custom-title">头像</span>
        </template>
      </van-cell>
      <!-- 昵称部分 -->
      <van-cell value="" is-link
        ><span id="lovename">{{ state.mineData.nickname }}</span>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">昵称</span>
        </template>
      </van-cell>
      <!-- 性别部分 -->
      <!-- 用v-if语句判断渲染哪部分代码 -->

      <van-cell is-link>
        <van-cell @click="show = true" style="width: 156px">
          <!-- 当后端数据没有传入性别时 -->
          <span id="sex" v-if="state.mineData.sex == null">请输入您的性别</span>
          <!-- 当后端数据传入性别时 -->
          <span id="sex" v-else-if="state.mineData.sex !== null">{{
            state.mineData.sex
          }}</span>
        </van-cell>

        <van-action-sheet
          v-model:show="show"
          :actions="actions"
          @select="onSelect"
        />
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title sex">性别</span>
        </template>
      </van-cell>
      <!-- 选择城市 -->
      <van-cell is-link @click="show2 = true">
        <span class="custom-title address">地区</span>
        <!-- 当后端数据未传入地址时 -->
        <span v-if="state.mineData.address == null" class="nowaddress"
          >请选择您所在的城市</span
        >
        <!-- 当后端数据传入地址时 -->
        <span v-else-if="state.shengData.name !== undefined" class="nowaddress">
          <!-- 将得到的数据进行拼接 -->
          {{ state.shengData.name }}{{ state.shiData.name
          }}{{ state.quData.name }}
        </span>
      </van-cell>
      <!-- 引入城市选择vant组件 -->
      <van-action-sheet v-model:show="show2" close-on-click-action>
        <div class="content">
          <van-area
            title="城市选择"
            :area-list="areaList"
            :columns-placeholder="['请选择', '请选择', '请选择']"
            :columns-num="3"
            @confirm="onConfirm"
          />
        </div>
      </van-action-sheet>
      <!-- 个人简介 -->
      <van-cell value="" is-link>
        <!-- 当后端数据未传入个人简介时 -->
        <input
          v-if="state.mineData.ingore == null"
          type="text"
          placeholder="未填写"
          class="custom-title ingore"
          style="text-align: right"
        />
        <!-- 当后端数据传入个人简介时 -->
        <p
          v-else-if="state.mineData.ingore !== null"
          class="custom-title ingore"
          style="text-align: right"
        >
          {{ state.mineData.intro }}
        </p>

        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">个人简介</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import http from "../utils/api";
import { areaList } from "@vant/area-data";
import router from "../router/index.js";
import { ref, onMounted, reactive } from "vue";
export default {
  setup() {
    // 点击左键头返回上一页面
    const onClickLeft = () => {
      router.push("/main/mine");
    };
    const state = reactive({
      // 定义mineData接收后端数据
      mineData: {
        nickname: "",
        ingore: "",
        address: "",
        sex: "",
      },
      // 分别定义接收省市县的数据
      shengData: {
        code: "",
        name: "",
      },
      shiData: {
        code: "",
        name: "",
      },
      quData: {
        code: "",
        name: "",
      },
    });
    // 设定弹出界面初始状态
    const show = ref(false);
    // 设定弹出界面内容
    const actions = [{ name: "男" }, { name: "女" }];
    // 点击弹出页面上的选项
    const onSelect = (item) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show2.value = false;
      // 将选中的值赋值给初始数据
      state.mineData.sex = item.name;
    };
    // 将省市区选择弹出框设为初始隐藏
    const show2 = ref(false);
    // 接收后端传输的数据
    onMounted(() => {
      http
        .mineDataApi({
          token: "12345",
          phone: 123,
        })
        .then((res) => {
          state.mineData = res.data;
          // 拿到数据之后直接计算得出num值
          complete(num);
        });
    });
    const onConfirm = (res) => {
      // 得到选中省市区的值并赋值给相应的对象
      (state.shengData = res[0]),
        (state.shiData = res[1]),
        (state.quData = res[2]);
      // 点击确认赋值完成后关闭弹出框
      show2.value = false;
      // 将address的值改变,防止上面结构显示错误
      state.mineData.address = "1";
      // 再次计算num值
      complete(num);
    };
    // 定义num的计算的方法
    const num = ref(20);
    const complete = (num) => {
      if (state.mineData.nickname !== null) {
        num.value = 20;
        num.value += 20;
      }
      if (state.mineData.sex !== null) {
        num.value += 20;
      }
      if (state.mineData.address !== null) {
        num.value += 20;
      }
      if (state.mineData.address == "1") {
        num.value += 20;
        num.value -= 20;
      }
      if (state.mineData.intro !== null) {
        num.value += 20;
      }
    };
    return {
      onClickLeft,
      state,
      show,
      show2,
      actions,
      onSelect,
      areaList,
      onConfirm,
      num,
      complete,
    };
  },
};
</script>
<style lang="less">
/* 头部样式 */
.head {
  width: 375px;
  height: 44px;
  font-weight: 900;
}
/* 左箭头样式 */
.van-nav-bar__arrow {
  font-size: 25px;
}
.van-nav-bar .van-icon {
  color: #575757;
}
/* 资料完整度样式 */
.datacomplete {
  font-size: 12px;
  width: 375px;
  height: 30px;
  line-height: 30px;
  text-indent: 8px;
}
/* 整体的数据盒样式 */
.msgbox {
  width: 375px;
  height: 220px;
  margin-top: 4px;
  background: #ffffff;
  /* 左侧标题样式 */
  .custom-title {
    display: block;
    margin-right: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 250;
    color: #969696;
    position: absolute;
    left: 0px;
    border: none;
    width: 150px;
  }
  /* 昵称样式 */
  #lovename {
    color: #000000;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 250;
  }
  /* 右侧箭头样式 */
  .van-icon {
    display: block;
    position: absolute;
    top: 8px;
    right: 0px;
  }
  /* 右侧文字样式 */
  .van-cell {
    width: 320px;
    height: 40px;
    margin-left: 21px;
    .van-cell__value {
      width: 150px;
      height: 40px;
      position: relative;
      top: -3px;
      right: 15px;
    }
  }
  /* 地址样式 */
  .van-cell:nth-child(4) {
    .van-cell__value--alone {
      width: 320px;
      position: absolute;
      left: 0px;
      top: 0px;
      .address {
        position: absolute;
        top: 8px;
        left: 0px;
      }
      .nowaddress {
        display: block;
        position: absolute;
        top: 8px;
        right: 26px;
      }
    }
  }
  /* 第一个van-cell头像内部的样式 */
  .van-cell:nth-child(1) {
    height: 60px;
    position: relative;
    .van-cell__title {
      span {
        display: block;
        position: absolute;
        top: 20px;
        right: 0px;
      }
    }
    .van-cell__value {
      width: 170px;
      height: 60px;
      position: absolute;
      top: 0px;
      right: 0px;
      span {
        display: block;
        text-align: right;
        width: 150px;
      }
      /* 图片位置样式 */
      .touxiang {
        display: block;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 5px;
        right: 30px;
        img {
          width: 100%;
        }
      }
    }
    .van-icon {
      display: block;
      position: absolute;
      top: 20px;
      right: 0px;
    }
  }

  /* 个人简介样式 */
  .van-cell:nth-child(5) {
    .van-cell__value {
      width: 200px;
      height: 40px;
      position: absolute;
      top: 6px;
      left: 143px;
    }
  }
}
</style>
